<template>
  <!-- 人员台账 页面 -->
  <div class="EmergencyList">
    <div class="flex location-wrap" v-if='FilledBy.systemXitong != "system"'>
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EmergencyResources' }">应急资源</el-breadcrumb-item>
        <el-breadcrumb-item>人员台账</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" :formData="formData" labelWidth="140px"
        @handleTreeSelect="handleTreeSelect" @node-click="deptChoose">
        <!-- <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
          <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :prop="item.id">
            <LsdForm :compData="item" :form="form" @handleTreeSelect="handleTreeSelect" @node-click="deptChoose(arguments, item)" @change="selectChange(arguments, item)" />
          </el-form-item>
        </el-form> -->
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" @select="handleSelectionChange" @select-all="handleSelectionChange"
        :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef"
        :actions="table.actions" ref="gjxm" :columns="table.columns" :title="table.title" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="close">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <DialogForm ref="formConfigData" slot="slot1" @changeEvent="handleChange" :formConfig="formConfig1" />
        <div slot="slot2">
          <DialogForm ref="formComponentData" @handleNodeClick="handleNodeClick" :formConfig="formConfig2" />
        </div>
        <div slot="slot3">
          <DialogForm ref="formInfoData" :formConfig="formInfoData" />
        </div>
      </LsdDialogTitle>
    </LsdDialog>
    <!-- 导入 -->
    <LsdDialog :dialogConfig="dialogConfig1" @handleBtn="handleBtn1" @close="close1">
      <div class="updr" slot="dialog">请选择您要导入的数据文件:</div>
      <DialogForm slot="dialog" ref="formComponent3" @handleBeforeUpload="((file) => { handleBeforeUpload(file, 2); })"
        :formConfig="formConfig3">
        <div slot="upload" class="upload">
          <div class="upload" @click.prevent.stop="noPrevent">
            <el-input class="sjgy" v-model="fileListName" :disabled="true"></el-input>
          </div>
          <el-button slot="trigger" type="primary">浏览</el-button>
          <el-button @click.stop="clear">清除</el-button>
        </div>
      </DialogForm>
      <div class="updrs" slot="dialog" @click.stop="onExports">下载模板文件</div>
      <div class="promptText" slot="dialog">{{ prompt }}</div>
    </LsdDialog>
  </div>
</template>

<script>
import { formData } from "./comps/configMember";
import { memberListPage, teamListPage, personnelLedgerDownload, personnelImport, personnelLedgerExcelExport, personnelDeleteByIds, personnelSave, personnelDetailsByIds, personnelUpdateById, getDicListlargeCategoryList } from "@/api/EmergencyResources/EmergencyResources.js";
import common from "@/utils/common.js";
// GetOrgTree
import { getSubclassUntilList } from "@/api/common.js";
import { showTime } from "@/lib";
import { getUnitTreeApi } from "@/api/EarlyWarningManagement/yjrb";
export default {
  data() {
    return {
      formData,
      form: {
      },
      table: {
        isSelectFlag: true, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "人员台账列表",
        actions: [
          {
            id: "dialogVisible",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          },
          {
            id: "dialogLeadingIn",
            text: "导入",
            type: "",
            btnAttr: { size: "small" }
          },
          {
            id: "onExport",
            text: "导出",
            type: "",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "name",
            label: "人员姓名",
            align: "center"
          },
          {
            prop: "accessUnit",
            label: "准入单位",
            align: "left"
          },

          {
            prop: "unit",
            label: "所属单位",
            align: "left"
          },
          {
            prop: "contractingUnit",
            label: "签约单位",
            align: "left"
          },
          {
            prop: "name",
            label: "人员名称",
            align: "center"
          },
          {
            prop: "memberType",
            label: "人员性质",
            align: "center"
          },
          {
            prop: "memberMajor",
            label: "人员专业",
            align: "center"
          },
          {
            prop: "personnelQualification",
            label: "人员资质",
            align: "left"
          },
          {
            prop: "teamName",
            label: "所属队伍",
            align: "left"
          },
          // {
          //   prop: "duty",
          //   label: "角色岗位",
          //   align: "left"
          // },
          {
            prop: "accessStatus",
            label: "准入状态",
            align: "center"
          }, {
            prop: "accessTerm",
            label: "准入期限",
            align: "center"
          }, {
            prop: "memberAbility",
            label: "特种作业能力",
            align: "left"
          }, {
            prop: "workingAge",
            label: "工作年限",
            align: "center"
          }, {
            prop: "contact",
            label: "手机号",
            align: "center"
          }, {
            prop: "permissionAccount",
            label: "统一权限账号",
            align: "left"
          },
          {
            prop: "occupationName",
            label: "工作状态",
            align: "left"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "80px",
            render: (h, { row }) => {
              // console.log(row)
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      // style: {display: row}
                      {...{
                        on: {
                          click: () => {
                            this.writeReport(row);
                          }
                        }
                      }}
                    >
                      {this.FilledBy.systemXitong == "system" ? "编辑" : ""}
                    </span>
                  }
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      // style: {display: row}
                      {...{
                        on: {
                          click: () => {
                            this.writeReport(row);
                          }
                        }
                      }}
                    >
                      {row.reportState === "3" && this.FilledBy.systemXitong == "system" ? "编辑" : ""}
                    </span>
                  }
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;margin-left: 10px;'
                      {...{
                        on: {
                          click: () => {
                            this.writeReportDelete(row);
                          }
                        }
                      }}
                    >
                      {this.FilledBy.systemXitong == "system" ? "删除" : ""}
                    </span>
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "410px",
          // height: "410px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
        // "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      activeNames: ["1", "2", "3", "4"],
      pageNum: 1,
      multipleSelection: [],
      // 弹窗信息
      dialogConfig: {
        title: "新增人员",
        isShow: false,
        btnList: [
          {
            name: "保存",
            id: "BSave", // 事件名
            type: "primary",
            size: "small"
          },
          {
            name: "取消",
            id: "getBackAdd", // 事件名
            size: "small"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "基本信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "准入信息",
          name: "2",
          slot: "slot2"
        },
        {
          title: "填报信息",
          name: "3",
          slot: "slot3"
        }
      ],
      // formConfig: {
      //   formData: [
      //     {
      //       type: "select",
      //       label: "信息来源",
      //       prop: "yjtzd",
      //       class: "half",
      //       lableWidth: "100px"
      //     },
      //     {
      //       type: "select",
      //       label: "预警通知单",
      //       prop: "yjtszd",
      //       class: "half",
      //       lableWidth: "100px"
      //     }
      //   ],
      //   rules: {
      //     yjtzd: [
      //       { required: true, message: "请选择响应命令单", trigger: "blur" }
      //     ]
      //   }
      // },
      formConfig1: {
        // disabled: true,
        formData: [
          {
            type: "input",
            label: "人员名称",
            prop: "name",
            name: "nameId",
            class: "half",
            // isDisabled: true, // 禁用
            lableWidth: "140px"
          },
          {
            type: "select",
            label: "人员性质",
            prop: "memberType",
            name: "memberTypeId",
            class: "half",
            lableWidth: "140px",
            option: []
          },
          {
            type: "select",
            label: "人员专业",
            prop: "memberMajor",
            name: "memberMajorId",
            class: "half",
            lableWidth: "140px",
            option: []
          },
          {
            type: "select",
            label: "人员资质",
            prop: "personnelQualification",
            name: "personnelQualificationId",
            class: "half",
            lableWidth: "140px",
            option: []
          },
          {
            type: "select",
            label: "特种作业能力",
            prop: "memberAbility",
            name: "memberAbilityId",
            class: "half",
            lableWidth: "140px",
            option: []
          },
          {
            type: "input",
            label: "工作年限",
            prop: "workingAge",
            name: "workingAgeId",
            class: "half",
            lableWidth: "140px"
          },
          {
            type: "input",
            label: "手机号",
            prop: "contact",
            name: "contactInformation",
            class: "half",
            lableWidth: "140px"
          },
          {
            type: "input",
            label: "统一权限账号",
            prop: "permissionAccount",
            name: "permissionAccount",
            class: "half",
            lableWidth: "140px"
          },
          {
            type: "input",
            label: "身份证号",
            prop: "cardNo",
            class: "half",
            lableWidth: "140px"
          }
        ],
        rules: {
          name: [
            { required: true, message: "请输入人员名称", trigger: "blur" }
          ],
          memberType: [
            { required: true, message: "请选择人员性质", trigger: "blur" }
          ],
          memberMajor: [
            { required: true, message: "请选择人员专业", trigger: "blur" }
          ],
          personnelQualification: [
            { required: true, message: "请选择人员资质", trigger: "blur" }
          ],
          memberAbility: [
            { required: true, message: "请选择特种作业能力", trigger: "blur" }
          ],
          workingAge: [
            { required: true, message: "请输入工作年限", trigger: "blur" }
          ],
          contact: [
            { required: true, message: "请输入手机号", trigger: "blur" },
            {
              required: true,
              pattern: /^1[3456789]\d{9}$/,
              message: "手机号格式不正确",
              trigger: "blur"
            }
          ]
        }
      },
      // 准入信息 模块
      formConfig2: {
        formData: [
          {
            type: "select",
            label: "准入状态",
            prop: "accessStatus",
            name: "accessStatusId",
            class: "half",
            lableWidth: "140px",
            option: []
          },
          {
            type: "dataPicker",
            label: "准入期限",
            prop: "accessTerm",
            class: "half",
            dateType: "datetime",
            lableWidth: "140px"
          },
          {
            type: "selectTree",
            label: "准入单位",
            prop: "accessUnit",
            name: "accessUnitId",
            title: "准入单位选择",
            choose: false,
            isDisabled: false,
            multiple: false,
            keyWord: "keyWord",
            treeRef: "treeRef",
            commonClick: false,
            ref: "tree_select",
            class: "half",
            lableWidth: "140px",
            option: [],
            treeData: {
              data: [],
              default: ["1"],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          },
          {
            type: "selectTree",
            label: "签约单位",
            prop: "contractingUnit",
            name: "contractingUnitId",
            title: "签约单位选择",
            choose: false,
            isDisabled: false,
            multiple: false,
            keyWord: "keyWord",
            treeRef: "treeRef",
            commonClick: false,
            ref: "tree_select",
            class: "half",
            lableWidth: "140px",
            option: [],
            treeData: {
              data: [],
              default: ["1"],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          },
          {
            type: "select",
            label: "所属队伍",
            prop: "teamId",
            name: "teamName",
            class: "half",
            lableWidth: "140px",
            option: []
          },
          {
            type: "select",
            label: "角色岗位",
            prop: "duty",
            name: "dutyId",
            class: "half",
            lableWidth: "140px",
            option: []
          }
        ],
        rules: {
          accessStatus: [
            { required: true, message: "请选择准入状态", trigger: "blur" }
          ],
          accessTerm: [
            { required: true, message: "请选择准入期限", trigger: "blur" }
          ],
          accessUnit: [
            { required: true, message: "请选择选择准入单位", trigger: "blur" }
          ]
        }
      },
      fileListName: "",
      //  导入 弹窗信息
      dialogConfig1: {
        title: "数据导入",
        isShow: false,
        width: "60%",
        btnList: [
          {
            name: "导入数据",
            id: "importSave", // 事件名
            size: "small",
            type: "primary"
          },
          {
            name: "取消",
            id: "getBack", // 事件名
            size: "small"
          }
        ]
      },
      // 填报信息 模块
      formInfoData: {
        // disabled: true,
        formData: [
          {
            type: "input",
            label: "创建人",
            prop: "creator",
            class: "third",
            isDisabled: true,
            lableWidth: "140px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "creatorUnit",
            isDisabled: true,
            class: "third",
            lableWidth: "140px"
          },
          {
            type: "input",
            label: "创建时间",
            prop: "createTime",
            class: "third",
            isDisabled: true,
            lableWidth: "140px"
          },
          {
            type: "input",
            label: "最后一次填报人",
            prop: "modifier",
            class: "third",
            isDisabled: true,
            lableWidth: "140px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "modifyUnit",
            class: "third",
            isDisabled: true,
            lableWidth: "140px"
          },
          {
            type: "input",
            label: "最后更新时间",
            prop: "modifyTime",
            class: "third",
            isDisabled: true,
            lableWidth: "140px"
          }
        ]
      },
      rules: {
      },
      formConfig3: {
        formData: [
          {
            type: "upload",
            label: "",
            prop: "ztqks",
            slot: "upload",
            action: "#",
            accept: "*",
            class: "sjgy",
            customize: true,
            tip: "温馨提示：请选择以.xlsx为后缀名的文件！",
            limit: 1,
            httpRequest: () => { },
            lableWidth: "130px"
          }
        ]
      },
      options: {
        dic_sjlb: [],
        dic_sjjb: [],
        dic_yxfw: [],
        dic_xxly: [],
        dic_zrbm: []
      },
      editId: "", // 编辑id
      changeId: "",
      FilledBy: {},
      prompt: "",
      PromptVerification: "",
      promptCode: 0
    };
  },
  mounted() {
    const FilledBy = {
      systemXitong: JSON.parse(sessionStorage.getItem("role")).roleCode,
      creator: JSON.parse(sessionStorage.getItem("account")).realName,
      modifier: JSON.parse(sessionStorage.getItem("account")).realName,
      creatorId: JSON.parse(sessionStorage.getItem("account")).id,
      modifierId: JSON.parse(sessionStorage.getItem("account")).id,
      deptId: JSON.parse(sessionStorage.getItem("org")).orgCode,
      creatorUnit: sessionStorage.getItem("dwbmName"),
      modifyUnit: sessionStorage.getItem("dwbmName"),
      createTime: showTime(new Date()),
      modifyTime: showTime(new Date()),
      approvalTime: new Date().toLocaleString()
    };
    this.FilledBy = FilledBy;
    if (this.FilledBy.systemXitong != "system") {
      this.table.actions = [
        {
          id: "onExport",
          text: "导出",
          type: "",
          btnAttr: { size: "small" }
        }
      ];
    } else {
      this.table.actions = [
        {
          id: "dialogVisible",
          text: "新增",
          type: "primary",
          btnAttr: { size: "small" }
        },
        {
          id: "dialogLeadingIn",
          text: "导入",
          type: "",
          btnAttr: { size: "small" }
        },
        {
          id: "onExport",
          text: "导出",
          type: "",
          btnAttr: { size: "small" }
        }
      ];
    }
    this.query();
    // GetOrgTree({ id1: "111" }).then(res => {
    //   this.formData[0].treeData.attrs.data = res;
    //   this.formData[1].treeData.attrs.data = res;
    // });
    getSubclassUntilList({ orgId: "1533835007229984" }).then(res => {
      this.formData[0].treeData.attrs.data = res;
      this.formData[1].treeData.attrs.data = res;
    });
    this.queryLoadData();
  },
  methods: {
    // 下拉框查询
    queryLoadData() {
      getDicListlargeCategoryList({ code: "yz_ry_ryzy" }).then(res => {
        this.formData[1].options = res.map((item) => {
          return {
            label: item.dicName,
            value: item.dicName
          };
        });
      });
      getDicListlargeCategoryList({ code: "yz_ry_ryxz" }).then(res => {
        this.formData[2].options = res.map((item) => {
          return {
            label: item.dicName,
            value: item.dicName
          };
        });
      });
      getDicListlargeCategoryList({ code: "yz_ry_ryzz" }).then(res => {
        this.formData[4].options = res.map((item) => {
          return {
            label: item.dicName,
            value: item.dicName
          };
        });
      });
      getDicListlargeCategoryList({ code: "yz_ry_zrzt" }).then(res => {
        this.formData[5].options = res.map((item) => {
          return {
            label: item.dicName,
            value: item.dicName
          };
        });
      });
      //
      // getDicListlargeCategoryList({ code: "" }).then(res => {
      //   this.formData[7].options = res.map((item) => {
      //     return {
      //       label: item.dicName,
      //       value: item.dicName
      //     };
      //   });
      // });

      // getDicListlargeCategoryList({ code: "yz_ry_tszynl" }).then(res => {
      //   this.formData[7].options = res.map((item) => {
      //     return {
      //       label: item.dicName,
      //       value: item.dicName
      //     };
      //   });
      // });
      // getDicListlargeCategoryList({ code: "yz_ry_tszynl" }).then(res => {
      //   this.formData[8].options = res.map((item) => {
      //     return {
      //       label: item.dicName,
      //       value: item.dicName
      //     };
      //   });
      // });
    },
    handleSizeChange(val) {
      this.form["pageNum"] = val["current-page"];
      this.form["pageSize"] = val["page-size"];
      this.query();
    },
    query() {
      delete this.form.accessUnitId;
      memberListPage(this.form).then(res => {
        this.table.tableData = res.data;
        this.paginationAtrrs.total = res.total;
      });
    },
    reset() {
      this.form = this.$options.data().form;
      this.$refs.gjxm.paginationAtrrsInner["current-page"] = 1;
      this.query();
    },
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    handleBtn(item) {
      this[item.id]();
    },
    handleBtn1(item) {
      this[item.id]();
    },
    // 新增
    dialogVisible() {
      console.log("新增");
      this.dialogConfig.isShow = true;
      if (this.editId == "") {
        this.dialogConfig.title = "人员新增";
      } else {
        this.dialogConfig.title = "人员编辑";
      }
      this.getOrgTree();
      this.$nextTick(() => {
        this.$refs.formInfoData.form = this.FilledBy;
      });
      this.formConfig1.formData.forEach((item) => {
        if (item.label === "人员性质") {
          getDicListlargeCategoryList({ code: "yz_ry_ryxz" }).then(res => {
            console.log(res);
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: item.id
              };
            });
            item.option = option;
          });
        }
      });
      // 人员专业
      this.formConfig1.formData.forEach((item) => {
        if (item.label === "人员专业") {
          getDicListlargeCategoryList({ code: "yz_ry_ryzy" }).then(res => {
            console.log(res);
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: item.id
              };
            });
            item.option = option;
          });
        }
      });
      // 人员资质
      this.formConfig1.formData.forEach((item) => {
        if (item.label === "人员资质") {
          getDicListlargeCategoryList({ code: "yz_ry_ryzz" }).then(res => {
            console.log(res);
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: item.id
              };
            });
            item.option = option;
          });
        }
      });
      // 特种作业能力
      this.formConfig1.formData.forEach((item) => {
        if (item.label === "特种作业能力") {
          getDicListlargeCategoryList({ code: "yz_ry_tszynl" }).then(res => {
            console.log(res);
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: item.id
              };
            });
            item.option = option;
          });
        }
      });
    },
    // 所属单位到所属部门
    handleNodeClick(data, node, item) {
      console.log("下拉出发了");
      if (item.label === "准入单位") {
        this.$set(this.$refs.formComponentData.form, "accessUnit", data.orgName);
        this.$set(this.$refs.formComponentData.form, "accessUnitId", data.id);
        this.$set(this.$refs.formComponentData.form, "teamName", "");
        this.$set(this.$refs.formComponentData.form, "teamId", "");
        teamListPage({ unitId: data.id }).then(res => {
          this.formConfig2.formData.forEach((item) => {
            if (item.label === "所属队伍") {
              const option = res.data.map((item) => {
                return {
                  label: item.teamName,
                  value: item.id
                };
              });
              item.option = option;
            }
          });
        });
      }
      if (item.label === "签约单位") {
        this.$set(this.$refs.formComponentData.form, "contractingUnit", data.orgName);
        this.$set(this.$refs.formComponentData.form, "contractingUnitId", data.id);
      }
    },
    // 新增弹窗下拉框赋值
    getOrgTree() {
      this.formConfig2.formData.forEach((item) => {
        if (item.label === "准入状态") {
          getDicListlargeCategoryList({ code: "yz_ry_zrzt" }).then(res => {
            console.log(res);
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: item.dicName
              };
            });
            item.option = option;
          });
        }
      });
      this.formConfig2.formData.forEach((item) => {
        console.log(item);
        // 树状 准入单位
        if (item.prop === "accessUnit") {
          getUnitTreeApi().then(res => {
            console.log(res);
            item.treeData.data = res;
          });
        }
        // 签约单位
        if (item.prop === "contractingUnit") {
          getUnitTreeApi().then(res => {
            console.log(res);
            item.treeData.data = res;
          });
        }
      });
      this.formConfig2.formData.forEach((item) => {
        if (item.label === "角色岗位") {
          getDicListlargeCategoryList({ code: "yz_ry_ryjs" }).then(res => {
            console.log(res);
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: item.id
              };
            });
            item.option = option;
          });
        }
      });
    },
    // 应急事件 下拉监听
    handleChange(val) {
      console.log(val);
      // getYjsjGetById({ id: val }).then(res => {
      //   console.log(res.id);
      //   this.changeId = res.id;
      //   this.$refs.formConfigData.form = res;
      //   console.log(this.$refs.formConfigData.form, "0000000");
      //   // this.$refs.formInfoData.form = res
      // });
    },
    // 编辑
    writeReport(val) {
      console.log(val);
      this.editId = val.id;
      this.dialogVisible();
      this.dialogConfig.isShow = true;
      personnelDetailsByIds({ id: val.id }).then(res => {
        // console.log(res)
        this.$refs.formConfigData.form = res;
        this.$refs.formComponentData.form = res;
        this.$refs.formInfoData.form = res;
      });
    },
    clear() {
      this.$refs.formComponent3.fileList = [];
      this.fileListName = "";
      this.prompt = "";
      this.$refs.formComponent3.form = this.$refs.formComponent3.$options.data().form;
      this.$nextTick(() => {
        this.prompt = "";
        this.$refs.formComponent3.$refs.formInlines.clearValidate();
      });
    },
    // 下载模板
    onExports() {
      personnelLedgerDownload().then(res => {
        common.downloadByBlob(res, `人员台账模板${new Date().getTime()}.xlsx`);
      });
    },
    // 列表选中的复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 导出操作
    onExport() {
      console.log("导出");
      if (this.multipleSelection.length <= 0) {
        this.$message({
          message: "请至少选择一条数据",
          type: "warning"
        });
      } else if (this.multipleSelection.length >= 1) {
        const arr = [];
        this.multipleSelection.map((item, index) => {
          arr.push(item.id);
        });
        console.log(arr);
        personnelLedgerExcelExport(arr).then(res => {
          if (res) {
            common.downloadByBlob(res, `人员台账${new Date().getTime()}.xlsx`);
            this.$message({
              message: "导出成功",
              type: "success"
            });
          }
        });
      }
    },
    // 删除
    writeReportDelete(val) {
      console.log(val.id);
      var tarra = val.id.split(",");
      console.log(tarra.toString());
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log("成功");
        personnelDeleteByIds([tarra.toString()]).then(data => {
          if (data) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.query();
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    deptChoose(arg, item) {
      // console.log(arg);
      // console.log(item);
      // if (item.elType === "lsdTree" && item.label === "准入单位") {
      //   console.log("触发");
      //   this.$set(this.form, item.id, arg[0].orgName);
      //   this.$set(this.form, item.id + "Id", arg[0].id);
      // }
      // this.$set(this.form, item.id, arg[0].orgName);
      // this.$set(this.form, item.id + "Id", arg[0].id);
    },
    handleTreeSelect(value) {
      const orgName = value[0].map(item => { return item.orgName; });
      const id = value[0].map(item => { return item.id; });
      this.$set(this.form, "accessUnitIds", id.splice(","));
      this.$set(this.form, "accessUnitId", orgName.splice(","));
    },
    // 新增 / 编辑 关闭弹窗
    close() {
      this.getBackAdd();
    },
    // 导入 关闭
    close1() {
      console.log("quxiao关闭");
      // this.dialogConfig1.isShow = false;
      this.clear();
    },
    // 新增 / 编辑 保存
    async BSave() {
      console.log("新增保存");
      console.log(this.$refs.formComponentData.form, "this.$refs.formComponentData.form");
      this.$refs.formConfigData.isValidate();
      this.$refs.formComponentData.isValidate();
      const flag = this.$refs.formConfigData.flag;
      const flag1 = this.$refs.formComponentData.flag;
      if (flag && flag1) {
        if (this.editId === "") {
          const parmas = {
            name: this.$refs.formConfigData.form.name, // 人员名称
            memberType: this.$refs.formConfigData.form.memberTypeId, // 人员性质
            memberMajor: this.$refs.formConfigData.form.memberMajorId, // 人员专业
            personnelQualification: this.$refs.formConfigData.form.personnelQualificationId, // 人员资质
            memberAbility: this.$refs.formConfigData.form.memberAbilityId, // 特种作业能力
            workingAge: this.$refs.formConfigData.form.workingAge, // 工作年限
            contact: this.$refs.formConfigData.form.contact, // 手机号
            cardNo: this.$refs.formConfigData.form.cardNo, // 身份证号
            permissionAccount: this.$refs.formConfigData.form.permissionAccount, // 统一权限账号

            accessStatus: this.$refs.formComponentData.form.accessStatusId, // 准入状态
            accessTerm: this.$refs.formComponentData.form.accessTerm, // 准入期限
            accessUnit: this.$refs.formComponentData.form.accessUnit, // 准入单位
            accessUnitId: this.$refs.formComponentData.form.accessUnitId, // 准入单位
            contractingUnit: this.$refs.formComponentData.form.contractingUnit, // 签约单位
            teamId: this.$refs.formComponentData.form.teamId, // 所属队伍id
            teamName: this.$refs.formComponentData.form.teamName, // 所属队伍
            duty: this.$refs.formComponentData.form.dutyId, // 角色岗位
            creator: this.FilledBy.creator, // 创建人
            creatorId: this.FilledBy.creatorId, // 创建人id
            creatorUnit: this.FilledBy.creatorUnit, // 单位及部门
            department: this.FilledBy.creatorUnit, // 单位及部门
            departmentId: this.FilledBy.deptId, // 单位及部门id
            createTime: this.FilledBy.createTime, // 创建时间
            modifier: this.FilledBy.creator, // 修改人
            modifierId: this.FilledBy.creatorId, // 修改人id
            modifyUnit: this.FilledBy.modifyUnit, // 单位及部门
            modifyTime: this.FilledBy.createTime // 修改时间
          };
          console.log(parmas, "parmasparmasparmas");

          const res = await personnelSave(parmas);
          console.log(res);
          if (res) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
            this.query();
            this.dialogConfig.isShow = false;
          }
        } else {
          const parmas = {
            id: this.editId,
            name: this.$refs.formConfigData.form.name, // 人员名称
            memberType: this.$refs.formConfigData.form.memberType, // 人员性质
            memberMajor: this.$refs.formConfigData.form.memberMajor, // 人员专业
            personnelQualification: this.$refs.formConfigData.form.personnelQualification, // 人员资质
            memberAbility: this.$refs.formConfigData.form.memberAbility, // 特种作业能力
            workingAge: this.$refs.formConfigData.form.workingAge, // 工作年限
            contact: this.$refs.formConfigData.form.contact, // 手机号
            cardNo: this.$refs.formConfigData.form.cardNo, // 身份证号
            permissionAccount: this.$refs.formConfigData.form.permissionAccount, // 统一权限账号

            accessStatus: this.$refs.formComponentData.form.accessStatus, // 准入状态
            accessTerm: this.$refs.formComponentData.form.accessTerm, // 准入期限
            accessUnit: this.$refs.formComponentData.form.accessUnit, // 准入单位
            accessUnitId: this.$refs.formComponentData.form.accessUnitId, // 准入单位
            contractingUnit: this.$refs.formComponentData.form.contractingUnit, // 签约单位
            teamId: this.$refs.formComponentData.form.teamId, // 所属队伍
            teamName: this.$refs.formComponentData.form.teamName, // 所属队伍
            duty: this.$refs.formComponentData.form.dutyId, // 角色岗位
            creator: this.FilledBy.creator, // 创建人
            creatorId: this.FilledBy.creatorId, // 创建人id
            creatorUnit: this.FilledBy.creatorUnit, // 单位及部门
            department: this.FilledBy.creatorUnit, // 单位及部门
            departmentId: this.FilledBy.deptId, // 单位及部门id
            createTime: this.FilledBy.createTime, // 创建时间
            modifier: this.FilledBy.creator, // 修改人
            modifierId: this.FilledBy.creatorId, // 修改人id
            modifyUnit: this.FilledBy.creatorUnit, // 单位及部门
            modifyTime: this.FilledBy.createTime // 修改时间
          };
          console.log(parmas, "parmasparmasparmas");
          const res = await personnelUpdateById(parmas);
          console.log(res);
          if (res) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.query();
            this.dialogConfig.isShow = false;
          }
        }
      }

    },
    // 导入数据
    importSave() {
      console.log("导入数据");
      if (this.PromptVerification === "{}" && this.promptCode === 200) {
        this.$message({
          message: "导入成功",
          type: "success"
        });
        this.query();
        this.dialogConfig1.isShow = false;
      } else if (this.PromptVerification !== "{}" && this.promptCode === 200) {
        this.$message({
          message: "导入模板数据不正确,请根据提示进行修改",
          type: "error"
        });
      } else if (this.promptCode === -1) {
        this.$message({
          message: "系统异常,请联系管理员",
          type: "error"
        });
      } else {
        this.$message({
          message: "请选择模板",
          type: "error"
        });
      }
    },
    // 导入
    dialogLeadingIn() {
      console.log("导入");
      this.dialogConfig1.isShow = true;
    },
    // 去掉字符串大括号
    removeBlock(str) {
      if (str) {
        var reg = /^\{/gi;
        var reg2 = /\}$/gi;
        str = str.replace(reg, "");
        str = str.replace(reg2, "");
        return str;
      } else {
        return str;
      }
    },
    // 导入模板
    handleBeforeUpload(file, val) {
      this.file = file;
      personnelImport(this.common.convertFormData({ multipartFile: file })).then(res => {
        res.text().then(data => {
          // data：指成功读取到的内容
          const datas = JSON.parse(data);
          this.promptCode = datas.code;
          this.PromptVerification = datas.data;
          if (datas.code === 200 && datas.data !== "{}") {
            // this.prompt = this.removeBlock(datas.data);
          } else if (datas.data === "{}") {
            console.log(";;;;");
          }
        }).catch(err => {
          // err： 指读取失败后返回的错误内容
        });
      });
      this.$nextTick(() => {
        this.$refs.formComponent3.form.ztqks = file.name;
        this.fileListName = file.name;
      });
    },
    // getBack() {
    // },
    // 新增关闭
    getBackAdd() {
      this.dialogConfig.isShow = false;
      this.editId = "";
      this.$refs.formConfigData.form = this.$refs.formConfigData.$options.data().form;
      this.$refs.formComponentData.form = this.$refs.formComponentData.$options.data().form;
      this.$refs.formInfoData.form = this.$refs.formInfoData.$options.data().form;
      this.$nextTick(() => {
        this.$refs.formConfigData.$refs.formInlines.clearValidate();
        this.$refs.formComponentData.$refs.formInlines.clearValidate();
        this.$refs.formInfoData.$refs.formInlines.clearValidate();
      });
    }
  }
};

</script>

<style lang='less' scoped>
@import "../../assets/style/common.less";
@import "../../assets/style/ComponentStyle.less";
@import "../../assets/style/pop-upNotification.less";

.upload {
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: 10px;

  :deep(.el-input__inner) {
    width: 98%;
    color: rgb(10, 99, 241);
    text-decoration: underline;
  }

  :deep(.el-button) {
    padding: 9px 15px !important;
  }
}

:deep(.el-upload__tip) {
  font-size: 15px;
  color: red;
  margin: 10px 0;
  margin-left: 19px;
}

:deep(.el-dialog__body) {
  position: relative;
}

.promptText {
  margin-left: 19px;
  font-size: 15px;
  color: red;
  // text-indent: 19px;
}

.updr {
  font-weight: 700;
  font-style: normal;
  color: #555555;
  font-size: 20px;
  text-indent: 19px;
  margin: 10px 0;
}

:deep(.el-upload-list__item-name) {
  margin-left: 16px;
}

.updrs {
  font-style: normal;
  color: #1723c4;
  font-size: 15px;
  text-indent: 19px;
  width: 110px;
  position: absolute;
  text-decoration: underline;
  cursor: pointer;
  top: 112px;
  left: 300px;
}

:deep(.el-upload) {
  width: 100% !important;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

// :deep(.el-popper) {
//   height: 280px;
// }

// :deep(.lsdBox) {
//   height: 283px;
// }

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-descriptions-item__label:not(.is-bordered-label)) {
  margin-right: 5px;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

:deep(.el-form-item__label) {
  font-size: 16px;
}

.doc-box {
  border: 1px solid #d9d9d9;
  padding: 20px 0 10px 0;
  // max-height: 570px;
  // overflow-y: auto;

  .doc-item {
    position: relative;
    padding: 10px 5px 0 5px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid #d7d7d7;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 30%;
      z-index: 1;
    }

    .checkbox {
      position: absolute;
      right: 10px;
      top: 5px;
      zoom: 200%;
    }

    :deep(.el-descriptions :not(.is-bordered) .el-descriptions-item__cell) {
      padding-bottom: 4px;
    }

    :deep(.el-descriptions__body) {
      background-color: transparent;
    }

    .doc-img {
      width: 80px;
      height: 80px;
      vertical-align: middle;
      margin-bottom: 5px;
    }

    :deep(.doc-label) {
      width: 60px;
      justify-content: flex-end;
    }

    :deep(.el-checkbox__inner::after) {
      border-color: #3270ff;
    }

    :deep(.el-checkbox__inner) {
      border-color: #3270ff;
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #fff;
    }
  }

  .active-doc {
    background-color: #fff;
    border-color: #3270ff;

    :deep(.el-descriptions__body) {
      // color: #3270ff;
    }
  }
}

.fm-box {
  display: flex;

  .fm-img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }

  .fm-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 160px;
    color: #606266;

    .upload-btn {
      position: relative;
      width: 114px;
      cursor: pointer;

      &:hover {
        :deep(.el-button) {
          border-color: #409eff;
        }
      }

      #fm-btn {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        width: 114px;
        height: 36px;
        z-index: 1;
      }

      :deep(.el-button) {
        padding: 9px 40px;
        font-size: 16px;

        span {
          text-decoration: underline;
          color: #3270ff;
        }
      }
    }
  }
}

/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
  font-size: 26px;
  position: relative;
  top: 8px;
}

/deep/.el-button--small {
  font-size: 16px;
}

/deep/.el-button--mini {
  font-size: 16px;
}

/deep/.fileLevel .el-select-dropdown__item {
  padding-left: 20px;
}
</style>

